<route lang="json5">
{
  style: {
    navigationBarTitleText: '格知汇GACC',
    navigationStyle: 'custom',
  },
}
</route>

<template>
  <view class="entire">
    <image
      style="z-index: -10; position: fixed; top: 0; width: 100vw; height: 100vh"
      :src="listBg"
      mode="aspectFill"
    />
    <view class="div1">
      <Backbar title="热门课程" />
    </view>

    <!--课程列表 -->
    <scroll-view
      scroll-y="true"
      class="div2"
      enable-flex="true"
      :style="{ height: pageData.div2Height + 'px' }"
      @scrolltolower="handleScroll"
    >
      <!-- 空显示 -->
      <view
        v-if="pageData.courseList.length === 0"
        style="
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 100%;
        "
      >
        <image src="/static/images/icons/imgNone.png" style="width: 309rpx; height: 259rpx" />
      </view>
      <view
        @click="navToCourseInfo(item)"
        v-for="(item, index) in pageData.courseList"
        :key="index"
      >
        <CourseItem :course="item" />
      </view>
      <!--加载中，到底啦横幅-->
      <view style="margin-top: 30rpx; padding-bottom: 50rpx">
        <wd-divider color="black">{{ pageData.loading ? '加载中...' : '已经到底了' }}</wd-divider>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { getMixedResourceList } from '@/service/mixedResource/mixedResource'
import CourseItemNoLike from '@/components/CourseItem/CourseItemNoLike.vue'
import { listBg } from '@/static/imgMap'

const pageData = reactive({
  loading: false,
  div2Height: 0,
  courseList: [],
  page: 1,
  limit: 10,
  totalCount: 0,
})

onMounted(async () => {
  uni.getSystemInfo({
    success(res) {
      const screenHeight = res.windowHeight
      uni
        .createSelectorQuery()
        .select('.div1')
        .boundingClientRect((data) => {
          pageData.div2Height = screenHeight - data.height
        })
        .exec()
    },
  })
  await fetchCourseList()
})

const fetchCourseList = async () => {
  pageData.loading = true
  try {
    const response = await getMixedResourceList({
      resType: '0',
      page: pageData.page,
      limit: pageData.limit,
    })
    pageData.courseList = response.data.items
    pageData.totalCount = response.data.totalCount
    pageData.page += 1
  } catch (error) {
    console.error('Error fetching course list:', error)
  } finally {
    pageData.loading = false
  }
}

const loadMoreData = async () => {
  if (pageData.loading || pageData.totalCount <= pageData.courseList.length) {
    return
  }

  pageData.loading = true

  try {
    const response = await getMixedResourceList({
      resType: '0',
      page: pageData.page,
      limit: pageData.limit,
    })
    pageData.courseList.push(...response.data.items)
    pageData.page += 1
  } catch (error) {
    console.error('Error loading more data:', error)
  } finally {
    pageData.loading = false
  }
}

const handleScroll = () => {
  if (!pageData.loading) {
    loadMoreData()
  }
}

const navToCourseInfo = (item) => {
  uni.navigateTo({
    url:
      '/pages/courseCenter/CourseInfo/CourseInfo?data=' + encodeURIComponent(JSON.stringify(item)),
  })
}
</script>

<style scoped lang="scss">
.entire {
  width: 100%;
  .div1 {
    .title {
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgb(37, 73, 115);
      width: 100%;
      height: 120rpx;
      color: #fff;
      font-size: large;
    }
    .select-cells {
      width: 100%;
      height: 80rpx;
      background: rgba(255, 255, 255, 0);
      display: flex;
      overflow-x: scroll;
      overflow-y: hidden;
    }
  }
  .div2 {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow-y: scroll;
  }
}
</style>
